<template>
  <view class="flex-col page">
    <!-- 筛选区域卡片 -->
    <view class="filter-card">
      <!-- 卡片头部 -->
      <view class="card-header">
        <view class="section_11"></view>
        <text class="text_10">筛选条件</text>
      </view>

      <!-- 按实验方案筛选 -->
      <view class="filter-section">
        <text class="filter-label">按实验方案筛选</text>
        <view class="flex-row section_5" @click="handleClick1" :class="{ disabled: selectedFilter === 'date'}">
          <input
              class="flex-col justify-start items-start input-1 text_20"
              v-model="expername"
              placeholder="请输入实验方案"
              :disabled="selectedFilter === 'date'"
              @input="showDropdown = true"
          />
        </view>
      </view>

      <!-- 按实验日期筛选 -->
      <view class="filter-section">
        <text class="filter-label">按实验日期筛选</text>
        <view :class="{ disabled: selectedFilter === 'name' || expername !== '' }">
          <!-- 当selectedFilter === 'date'&& expername === ''时才显示uni-calendar组件 -->
          <uni-calendar
              ref="calendar"
              :insert="false"
              @confirm="confirm"
              v-show="selectedFilter === 'date' && expername === ''"
              :disabled="selectedFilter === 'name' || expername !== ''"
          />

          <!-- 遍历日历的每个日期格子 -->
          <view v-for="day in calendarData.days" class="calendar-day">
            <!-- 显示原点提示（根据实验数据判断） -->
            <view class="dot" v-if="hasExperimentData(day.date)"></view>
          </view>

          <view
              class="flex-row items-center date-picker"
              @click="handleClick"
              :class="{ disabled: selectedFilter === 'name' || selectedDate !== '' || expername !== '' }"
          >
            <image class="calendar-icon" src="../../static/images/769d50c101677d270257a54c833a0303.png" @click="open"></image>
            <text class="date-text" @click="open" v-if="selectedDate === '' || selectedDate === currentDate">{{ currentDate }}</text>
            <text class="date-text" @click="open" v-else>{{ selectedDate }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 历史记录列表卡片 -->
    <view class="history-card">
      <!-- 卡片头部 -->
      <view class="card-header">
        <view class="section_11"></view>
        <text class="text_10">实验记录</text>
      </view>

      <!-- 记录列表 -->
      <view class="history-list">
        <view
            v-for="(item,index) in history"
            :key="index"
            class="history-item"
            @click="navTo('/pages/expertrecord/expertrecord?serialnum_history='+item.serialnum_history)"
        >
          <view class="status-icon">
            <image v-if="item.rate_exper==100" class="biaoshi" src="../../static/images/wancheng .png"></image>
            <image v-else class="biaoshi" src="../../static/images/weiwancheng .png"></image>
          </view>
          <view class="item-content">
            <text class="item-name">{{item.name_exper}}</text>
            <view class="item-info">
              <text class="info-text">时长: {{parseFloat(item.runningtime_exper/60).toFixed(1)}}小时</text>
              <text class="info-text">完成度: {{item.rate_exper}}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="fixed-bottom">
      <view class="flex-row footer">
        <view class="flex-col justify-start items-center text-wrapper_3" @click="reset()">
          <text class="text_10_btn">重置</text>
        </view>
        <view class="flex-col justify-start items-center text-wrapper_4" @click="submit()">
          <text class="font_2 text_11">确定</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { _gethistorybydate} from '@/service/history.js'
import { _gethistorybyname} from '@/service/history.js'
import { _allhistory} from '@/service/history.js'
import { _getbyobscurename} from '@/service/history.js'

export default {
  components: {},
  props: {},
  data() {
    return {
      selectedDate:'',
      currentDate:'',
      history:[],
      expername:'',
      selectedFilter: null,
      calendarData: {
        days:[]
      },
      account_user:'',
    };
  },

  mounted() {
    const today=new Date()
    const year=today.getFullYear()
    const month=String(today.getMonth()+1).padStart(2,'0')
    const day=String(today.getDate()).padStart(2,'0')
    this.currentDate=`${year}-${month}-${day}`
  },

  onShow() {
    let newdata;
    try {
      const value = uni.getStorageSync('userInfo');
      if (value != null) {
        this.account_user = value.accountNum
        console.log(this.account_user);
      }
    } catch (e) {
      console.error(e);
    }
  },

  methods: {
    navTo(url){
      uni.navigateTo({
        url:url
      })
    },
    open(){
      this.$refs.calendar.open();
    },
    confirm(date) {
      this.selectedDate=date.fulldate;
      console.log(this.selectedDate);
    },
    async gethistory(){
      let date={
        date_history:this.selectedDate,
        account_user:this.account_user
      }
      let res=await _gethistorybydate(date)
      console.log(this.selectedDate)
      this.history=res.data
      console.log(res.data)
      if(this.history.length==0){
        this.$api.msg('该日未做实验')
      }
    },

    async gethistorybyname(){
      let date={
        name_exper:this.expername,
        account_user:this.account_user
      }
      let res=await _gethistorybyname(date)
      console.log(this.expername)
      this.history=res.data
      console.log(res.data)
    },

    async getbyobscurename(){
      let date={
        account_user:this.account_user,
        name_exper:this.expername
      }
      let res=await _getbyobscurename(date)
      console.log(res.data)
      this.history=res.data
      if(this.history.length==0){
        this.$api.msg('未搜索到相关实验')
      }
    },

    handleClick(){
      console.log(this.expername)
      if(this.expername===''){
        this.selectFilter('date')
      }else{
        this.selectFilter('name')
        this.$api.msg('请输入实验方案,重置后选择日期!')
      }
    },

    handleClick1(){
      if(this.selectedDate===''){
        this.selectFilter('name')
      }else{
        this.$api.msg('请选择日期,重置后输入试验方案!')
      }
    },

    selectFilter(filter) {
      this.selectedFilter = filter;
    },

    reset(){
      this.selectedFilter = '';
      this.expername = '';
      this.selectedDate = '';
      uni.redirectTo({
        url:'/pages/screen/screen'
      })
    },

    submit() {
      console.log(this.selectedFilter)
      if(this.selectedFilter===null){
        this.$api.msg('请选择一种方式进行筛选!')
      }
      else{
        if (this.selectedFilter === 'name') {
          this.gethistorybyname()
          this.getbyobscurename()
        } else if (this.selectedFilter === 'date') {
          this.gethistory()
        }
      }
    },

    dateFormat(registertime) {
      let date = new Date(registertime);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      return year + "-" + month + "-" + day;
    },
  },
};
</script>

<style scoped lang="css">
/* 页面整体样式 */
.page {
  background-color: #f7f7f7;
  min-height: 100vh;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 140rpx;
}

/* 卡片通用样式 */
.filter-card,
.history-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.08);
  border: solid 2rpx #138f8720;
  margin: 30rpx;
  padding: 30rpx 24rpx;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.section_11 {
  background-color: #138f87;
  border-radius: 14.58rpx;
  width: 8.33rpx;
  height: 29.42rpx;
  margin-right: 20rpx;
}

.text_10 {
  color: #000000;
  font-size: 32rpx;
  font-family: WenQuanYiMicroHeiMono;
  font-weight: 600;
  line-height: 32rpx;
}

/* 筛选区域样式 */
.filter-section {
  margin-bottom: 40rpx;
}

.filter-label {
  display: block;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.section_5 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  height: 80rpx;
  padding: 0 24rpx;
}

.input-1 {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
}

.text_20 {
  font-size: 28rpx;
  font-family: MiSans;
}

/* 日期选择器样式 */
.date-picker {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  height: 80rpx;
  padding: 0 24rpx;
}

.calendar-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}

.date-text {
  font-size: 28rpx;
  color: #666666;
  font-family: MiSans;
}

/* 禁用状态 */
.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 历史记录列表样式 */
.history-list {
  display: flex;
  flex-direction: column;
}

.history-item {
  display: flex;
  align-items: flex-start;
  padding: 24rpx;
  background-color: #fafafa;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  transition: all 0.3s;
}

.history-item:active {
  background-color: #f0f0f0;
  transform: scale(0.98);
}

.status-icon {
  margin-right: 20rpx;
}

.biaoshi {
  width: 48rpx;
  height: 48rpx;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-name {
  font-size: 30rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 12rpx;
}

.item-info {
  display: flex;
  flex-wrap: wrap;
}

.info-text {
  font-size: 26rpx;
  color: #666666;
  margin-right: 30rpx;
  margin-bottom: 8rpx;
}

/* 底部按钮样式 */
.fixed-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px -4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.footer {
  display: flex;
  justify-content: space-between;
}

.text-wrapper_3,
.text-wrapper_4 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rpx;
}

.text-wrapper_3 {
  background-color: #ececec;
}

.text_10_btn {
  color: #000000;
  font-size: 32rpx;
  font-family: MiSans;
  font-weight: 500;
}

.text-wrapper_4 {
  background-color: #10857d;
}

.font_2 {
  font-size: 32rpx;
  font-family: MiSans;
  color: #ffffff;
  font-weight: 500;
}

.text_11 {
  line-height: 32rpx;
}

/* 日历相关样式 */
.calendar-day {
  position: relative;
}

.dot {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff0000;
}

/* 辅助类 */
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.items-center {
  align-items: center;
}

.justify-start {
  justify-content: flex-start;
}
</style>